<template>
	<comHead :datas="datasObj"></comHead>

	<view class="notice page pd-30">
		<view class="msgList flex" :class="{ 'mt-20': index > 0 }" v-for="(item, index) in msgList" :key="index"
			@longpress="item.showDel = 1">
			<template v-if="item.type == 1 || item.type == 2">
				<text class="ft c-99">{{ item.created_at }}</text>
				<view class="card pd-20  mt-10">
					<view>
						<view class="ft1 flex">
							<text
								style="display: inline-block;width: 8rpx;height: 8rpx;border-radius: 50rpx;background-color: #FF0000;margin-right: 10rpx;flex-shrink: 0;"
								v-if="item.is_read == 0"></text>
							{{ item.title }}
						</view>
						<view class="ft mt-10 c-99"> {{ item.content }}</view>
					</view>
					<view class="btn flex-center" style="margin-left: auto;" @click="goDetail(item)">
						<text class="ft mr-10">{{ "查看详情" }}</text>
						<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
					</view>
					<view class="del-btn flex-center" v-if="item.showDel == 1" @click="delMsg(item.id, index)">
						<image class="bg" src="https://cdn.oss.bon-top.cn/static_bc/images/del_msg_bg.png"></image>
						<view class="shadow"></view>
						<view class="txt">删除</view>
					</view>
				</view>
			</template>
			<template v-if="item.type == 3">
				<text class="ft c-99">{{ item.created_at }}</text>
				<view class="card pd-20  mt-20">
					<view>
						<view class="ft1 flex"> <text
								style="display: inline-block;width: 8rpx;height: 8rpx;border-radius: 50rpx;background-color: #FF0000;margin-right: 10rpx;flex-shrink: 0;"
								v-if="item.is_read == 0"></text> {{ item.title }}</view>
						<view class="ft mt-10 c-99"> {{ item.content }}</view>
					</view>
					<view class="flex-end">
						<view class="btn mt-20 flex-center" @click="goDetail(item)">
							<text class="ft mr-10">{{ "查看详情" }}</text>
							<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
							</image>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="com-empty" v-if="msgList.length == 0">暂无数据</view>
		<view style="height: 184rpx;"></view>
		<view class="btnGroup">
			<view class="btn1 flex-eve">
				<view class="allClear flex-center" @click="showClear = true">{{ "一键清空" }}</view>
				<view class="noRead flex-center" @click="show = true">{{ "一键标记已读" }}</view>
			</view>
		</view>
		<up-modal width="518rpx" @confirm="confirm" @cancel="cancel" contentTextAlign="center" :show="show"
			:title="title" :showCancelButton="true" :content='content'></up-modal>
		<up-modal width="518rpx" @confirm="clearConfirm" @cancel="clearCancel" contentTextAlign="center"
			:show="showClear" :title="clearTitle" :showCancelButton="true" :content='clearContent'></up-modal>
		<up-modal width="518rpx" @confirm="delMsgConfirm" @cancel="delMsgCancel" contentTextAlign="center"
			:show="showDelMsg" :title="'删除消息'" :showCancelButton="true" :content="'确定要删除消息吗？'"></up-modal>
	</view>
</template>

<script lang="js" setup>
import {
	ref,
	reactive
} from "vue";
import {
	onShow,
	onLoad,
	onReachBottom
} from "@dcloudio/uni-app";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '系统通知',
	img: '',
	color: '#f8f8f8',
	direction: '',
	scrollTop: 0,
	noBack: false,
	isBorder: true

})
//获取消息列表
const msgPage = ref(1)
const msgList = ref([])
const msgLoading = ref(true)
const getMsgListData = () => {
	if (!msgLoading.value) {
		return
	}
	uni.showLoading()
	msgLoading.value = false
	utils
		.request(
			api.messageList, {
			page: msgPage.value,
			pageSize: 10,
			type: type.value
		},
			"get"
		)
		.then((res) => {
			msgPage.value++
			if (res.data.items.length > 0) {
				msgList.value = msgList.value.concat(res.data.items)
			}
			if (msgPage.value <= res.data.pageInfo.totalPage) {
				msgLoading.value = true
			}
			uni.hideLoading()
		});
};
onReachBottom(() => {
	getMsgListData()
})
const type = ref('')
onLoad((options) => {
	type.value = options.type ? options.type : ''
	datasObj.title = options.type == 1 ? '系统通知' : options.type == 2 ? '订单交易通知' : '优惠活动通知'
	getMsgListData()
})

// 页面显示时检测刷新标记
onShow(() => {
	const app = getApp();
	if (app.globalData.shouldRefresh) {
		reloadData()
		app.globalData.shouldRefresh = false;
	}
})
const reloadData = () => {
	msgPage.value = 1
	msgList.value = []
	msgLoading.value = true
	getMsgListData()
}

const show = ref(false)
const title = ref('一键标记已读');
const content = ref('确定要一键标记所有消息已读吗？');
const confirm = () => {
	show.value = false
	utils
		.request(
			api.messageRead, {
			is_all: 1,
			type: type.value
		},
			"post"
		)
		.then((res) => {
			msgPage.value = 1
			msgList.value = []
			msgLoading.value = true
			getMsgListData()
		});
}
const cancel = () => {
	show.value = false
}

const showClear = ref(false)
const clearTitle = ref('一键清空');
const clearContent = ref('确定要一键清空所有消息吗？');
const clearConfirm = () => {
	showClear.value = false
	utils
		.request(
			api.messageDelete, {
			is_all: 1,
			type: type.value
		},
			"post"
		)
		.then((res) => {
			msgList.value = []
			msgLoading.value = false
		});
}
const clearCancel = () => {
	showClear.value = false
}

const goDetail = (item) => {
	// 清除数据
	utils
		.request(
			api.messageRead, {
			type: type.value,
			id: item.id
		},
			"post"
		)
		.then((res) => {

			item.is_read = 1


		});
	uni.navigateTo({
		url: "/subpackage/message/noticeDetail?id=" + item.id,
	});
}

const showDelMsg = ref(false)
const showDelId = ref(0)
const showDelIndex = ref(0)
const delMsg = (id, index) => {
	showDelMsg.value = true
	showDelId.value = id
	showDelIndex.value = index
}
const delMsgCancel = () => {
	showDelMsg.value = false
	msgList.value[showDelIndex.value].showDel = 0
}
const delMsgConfirm = () => {
	showDelMsg.value = false
	utils
		.request(
			api.messageDelete, {
			id: showDelId.value
		},
			"post"
		)
		.then((res) => {
			msgList.value.splice(showDelIndex.value, 1);
			msgList.value.forEach(f => f.showDel = 0)
		});
}
</script>
<style lang="scss">
.msgList {
	flex-direction: column;
	justify-content: center;

	.card {
		width: 690rpx;
		// height: 124rpx;
		background: #f8f8f8;
		border-radius: 40rpx;
		position: relative;

		.del-btn {
			position: absolute;
			top: 50rpx;
			left: 316rpx;
			z-index: 1;
			width: 128rpx;
			height: 94rpx;

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 128rpx;
				height: 94rpx;
				z-index: 1;
			}

			.shadow {
				width: 128rpx;
				height: 74rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.06);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				position: absolute;
				top: 20rpx;
				left: 0;
				z-index: 2;
			}

			.txt {
				position: absolute;
				top: 40rpx;
				left: 40rpx;
				font-weight: 800;
				font-size: 24rpx;
				color: #333333;
				z-index: 2;
			}
		}
	}

	.btn {
		width: 170rpx;
		height: 54rpx;
		background: #ffffff;
		border-radius: 20rpx;
		flex-shrink: 0;
	}


}

.btnGroup {
	width: 750rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #f8f8f8;
	padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
	z-index: 99;

	.btn1 {
		//border: 2rpx solid red;
		width: 750rpx;
		height: 118rpx;
		background: #f8f8f8;

		.allClear {
			width: 196rpx;
			height: 78rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}

		.noRead {
			width: 454rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #dbf046;
		}
	}
}
</style>